<script setup lang='ts'>
import Footer from '@/pages/footer/footer.vue'
import { useGetTenderInfo } from '@fl/api/man-api'
import { DownLink } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { useTagsViewStore } from '@fl/store/modules/tagsView'
import { useUserStore } from '@fl/store/modules/user'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'

import { useTag } from '../home/component/useTag'

const userStore = useUserStore()

const tagsViewStore = useTagsViewStore()

const { createConfirmModal } = useMessage()

onBeforeRouteLeave(async (to, _from, next) => {
    // 如果下一页不是回到 tender-index, 就清除所有缓存
    if (to.name !== 'tender-index') {
        tagsViewStore.delAllViews()
    }
    next()
})

const { params } = useRoute()
const { back, options, push } = useRouter()

const { getClass, getLabel } = useTag()

const _id = computed(() => {
    return params?.id
})

const fileList = computed(() => {
    return data.value?.fileUrl ? JSON.parse(data.value.fileUrl) : []
})

function goBack() {
    if (options.history.state.back) {
        back()
        return
    }
    push('/tender')
}

const { data } = useGetTenderInfo(_id.value as string)

const extensions = computed<any>(() => {
    try {
        if (data.value?.params) {
            const result = JSON.parse(data.value.params)
            return result
        }
        return ''
    }
    catch (error) {
        console.error(error)
        return ''
    }
})

const buttonConfiguration = computed(() => {
    if (dayjs().isBefore(dayjs(extensions.value?.applicationEndTime || ''))) {
        return {
            disabled: false,
            name: '报名',
            type: 'primary',
        }
    }
    return {
        disabled: true,
        name: '已过报名截止时间',
        type: 'info',
    }
})

const currentRole = computed(() => userStore.getUserInfo?.sysUser?.roles?.[0]?.roleKey || 'visitor')

function release() {
    if (userStore.getUserInfo) {
        if (currentRole.value !== 'supplier') {
            createConfirmModal({
                confirmButtonText: currentRole.value === 'visitor' ? '企业认证' : '确定',
                content: '企业认证为供应商后才能报名哦',
                onError: () => {

                },
                onSuccess: () => {
                    if (currentRole.value === 'visitor') {
                        push('/authentication/agreement?form=1&step=0')
                    }
                },
            })
            return
        }
        window.open(extensions.value?.bidSystemUrl)
        return
    }
    createConfirmModal({
        confirmButtonText: '去登陆',
        content: '登陆后才能报名哦',
        onError: () => {

        },
        onSuccess: () => {
            push('/login')
        },

    })
}
</script>

<template>
    <div class="mx-auto mt-40 w-1300">
        <div class="mb-20 text-16 text-red font-400 flex cursor-pointer items-center">
            <div i-radix-icons:double-arrow-left
                 class="text-red size-16"
            />

            <span class="ml-8"
                  @click="goBack"
            >返回列表</span>
        </div>

        <div class="p-30 bg-white rd-8">
            <div class="mx-auto flex w-1000 justify-center items-center">
                <div class="mr-24 text-24 c-#1D2129 font-600 text-center">
                    {{ data?.noticeName }}

                    <span class="inline-block rounded-3 text-12 lh-21 text-center h21 w64 translate-y--4"
                          :class="getClass(data?.category)"
                    >
                        {{ getLabel(data?.category) }}
                    </span>
                </div>
            </div>

            <div class="mt-16 text-14 text-#767676 font-400 flex gap-20 justify-center">
                <div> 发布时间：{{ data?.createTime }}</div>

                <div v-if="extensions.applicationButtonFlag">
                    报名截止时间：{{ extensions?.applicationEndTime }}
                </div>
            </div>

            <div class="mx-auto my-30 bg-gray-2 h-1 w-1200" />

            <div class="mx-auto w-1000">
                <div v-html="data?.richText" />
            </div>

            <div v-if="fileList.length"
                 class="space-y-8 mx-auto mt-30 flex flex-col w-1000"
            >
                <span class="text-16">附件下载：</span>

                <DownLink :file-list="fileList" />
            </div>

            <div v-if="false"
                 class="my-20 flex justify-center items-center"
            >
                <ElButton :type="buttonConfiguration.type"
                          :disabled="buttonConfiguration.disabled"
                          @click="release"
                >
                    {{ buttonConfiguration.name }}
                </ElButton>
            </div>
        </div>
    </div>

    <Footer />
</template>

<style lang="less" scoped>
.custom-underline::before {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    background: rgb(59 130 246 / var(--un-text-opacity));
    width: 0; //初始宽度为0
    left: 0;
    bottom: 0;
    transition: width 0.3s;
}

.custom-underline:hover::before {
    width: 100%; //鼠标移入就变成100%
}

.jc-footer {
    background: #fff;
    margin-top: 20px;
}
</style>
